<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.js"></script>
</head>

<body>
    <script>
        //1.promise基础用法
        /*  let p = new Promise((reslove, reject) => {
              //内部放异步请求的内容 ajax ,成功的通过reslove回调出去，失败的通过reject回调回去
  
              // reslove('成功') 状态由pending变成fulfilled
              // reject('失败') 状态由pending变成reject
          })
  
          //    then里面是方法，代表请求成功或失败执行的回调
  
          //方法1
          // console.log('18三种状态', p); //promise返回的是一个对象
          // p.then((res) => {//成功回调
          //     console.log(20, res);
          // }, (err) => {//失败回调
          //     console.log(22, err);
          // })
  
          //方法2
          p.then((res) => {//成功回调
              console.log('成功回调', res);
          }).catch((err) => {//失败回调
              console.log('失败回调', err);
          }).finally(() => {
              console.log('不管成功与失败都会执行');
          })*/

        // 2.promise应用-里面放网络请求，把异步请求结果变成链式调用执行

        // ajax请求数据-成功或者失败方法实在内部执行的 如果请求成功的数据外面要用时，外面是拿不到的 因为它是一个函数
        // $.ajax({
        //     url: 'abc.txt',
        //     success: function (res) {
        //         console.log(36, res);//成功
        //     }, error: function (err) {
        //         console.log(err);//失败
        //     }
        // })

        // 用promise包装网络ajax请求，两个参数其实是回调名字
        // let p = new Promise((cb, cb2) => {
        //     $.ajax({
        //         url: 'sbc.txt',
        //         success: function (res) {
        //             console.log(36, res);//成功
        //             cb(res)//成功回调
        //         },
        //         error: function (err) {
        //             console.log(err);//失败
        //             cb2(err)//失败的回调
        //         }
        //     })
        // })
        //用法1
        // console.log(61, p);
        // p.then((res) => {
        //     console.log('成功的结果', res);
        // },
        //     (err) => {
        //         console.log('失败的结果', err);
        //     })
        //用法2
        // p.then((res) => {
        //     console.log('成功的结果', res);
        // }).catch((err) => {
        //     console.log('失败的结果', err);
        // })
        //2.1 promise可以把异步的执行改成同步，把请求成功的数据，通过回调函数拿到外面执行
        /* var p = new Promise(function (reslove, reject) {
             //异步请求
             $.ajax({
                 url: 'data/123.txt',
                 success: function (res) {
                     reslove(res)//成功回调
                 },
                 error: function (err) {
                     reject(err)//失败回调
                 }
             })
         })
 
         //通过then，把异步执行弄成同步执行
         console.log(p);//返回的对象{} 里面有then方法，代表的请求成功，或者失败
         p.then(function(res){
             console.log('11成功的结果',res);
         }).catch(function(err){
             console.log('12失败的结果',res);
         })*/


        //2.2 axios的原理--内部封装
        /*function axios(url2) {
            return new Promise(function (reslove, reject) {
                $.ajax({
                    url: url2,
                    success: function (res) {
                        reslove(res)//成功回调
                    }, error: function (err) {
                        reject(err)//失败回调
                    }
                })
            })
        }
        var p2 = axios('data/1.json')
        p2.then(function (res) {
            console.log(22, res);
        }, function (err) {
            console.log(err);
        })*/

        //3 promise解决地狱回调  通过promise封装ajax方法
        function getAjax(url2) {
            return new Promise(function (resolve, reject) {
                $.ajax({
                    url: url2, //url可通过外面传入
                    success: function (res) {
                        resolve(res) //成功回调
                    },
                    error: function (err) {
                        reject(err) //失败回调
                    }
                })

            })

        }
        var arr = getAjax('data/123.txt')   //同步执行
        var arr2 = getAjax('data/num.txt')  //同步执行
        arr.then((res) => {
            console.log(83, res)
            //   var data=eval(res)  //把字符串转成原始数据	
            let data = JSON.parse(res)
            data.push('我是新添加的')
            console.log(171, data)
            if (data) {
                arr2.then((res1) => {
                    console.log(87, res1)
                })
            }
        }).catch(err => {
            console.log('154失败了', err);
        })
    </script>
</body>

</html>